<template>
  <div class="resource-block">
    <div class="flex h-60">
      <div
        class="card w-96 bg-base-100 shadow-xl image-full mx-6"
        v-for="item in resourceList"
        :key="item.id"
      >
        <figure class="px-1 pt-1">
          <img :src="item.resource_img" class="rounded-xl h-full w-full" />
        </figure>
        <div class="card-body">
          <h2 class="card-title">{{ item.resource_title }}</h2>
          <p>{{ item.resource_desc }}</p>
          <div class="card-actions justify-end">
            <button class="btn btn-primary" @click="downloadFile(item)">
              下载
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="flex h-80">
      <div
        class="card w-96 bg-base-100 shadow-xl mx-6"
        v-for="item in resourceList"
        :key="item.id"
      >
        <figure class="px-10 pt-10">
          <img :src="item.resource_img" class="rounded-xl" />
        </figure>
        <div class="card-body items-center text-center">
          <h2 class="card-title">{{ item.resource_title }}</h2>
          <p>{{ item.resource_desc }}</p>
          <div class="card-actions">
            <button class="btn btn-primary" @click="downloadFile(item)">
              下载
            </button>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { postFindResourceListPage } from "@/api/resource";
import { onMounted, ref } from "@vue/runtime-core";
let params = {
  pageSize: 10,
  currentPage: 1,
};
const resourceList = ref([]);

const downloadFile = function (item) {
  if (item.resource_url) {
    window.open(item.resource_url, "_blank");
  }
};

onMounted(() => {
  postFindResourceListPage(params).then((res) => {
    resourceList.value = res.list;
  });
});
</script>
<style scoped>
.resource-block {
  padding: 2rem;
}
</style>